<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xDroplist</title>
<style type="text/css">
html{background-color:#fff;overflow-y:scroll;}
body,div,dl,dt,dd,ol,.ul,li,h1,h2,h3,h4,h5,h6,hr,pre,code,form,input,button,fieldset,textarea,p,blockquote,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 "Microsoft Yahei",Tahoma,Arial,\5b8b\4f53;}
table{border-collapse:collapse;border-spacing:0;table-layout:fixed;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,.ul{list-style:none;}
del,ins{text-decoration: none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
h2{font-size:14px;font-weight:bold;}
input,button,textarea,select{font-size:100%;}
q:before,q:after{content:'';}
addr,acronym{border:0;font-variant:normal;}
sup,sub{vertical-align:baseline;}


.wrapfix{*zoom:1;}
.wrapfix:after{content:'\20';display:block;height:0;clear:both;}

::-webkit-scrollbar-track-piece{background-color:#f5f5f5;border-left:1px solid #d2d2d2;}
::-webkit-scrollbar{width:13px;height:13px;}
::-webkit-scrollbar-thumb{background-color:#c2c2c2;background-clip:padding-box;border:1px solid #979797;min-height:28px;}
::-webkit-scrollbar-thumb:hover{border:1px solid #636363;background-color:#929292;}

body{padding:100px 0 0 100px;}

.xDroplist{font:12px/1.5 "Microsoft Yahei",Tahoma,Arial,\5b8b\4f53;}
.xDroplist ul,.xDroplist li{list-style:none;margin:0;padding:0;}
.xDroplist{display:inline-block;+display:inline;zoom:1;background:#fff;border:1px #ccc solid;height:24px;position:relative;left:0;top:0;z-index:9;}
.xDroplist.expand{z-index:99;background-color:#f5f5f5;box-shadow:2px 3px 5px -2px #ddd inset;}
.xDroplist.expand .xDroplistArrow{transform:rotate(180deg);-webkit-transform:rotate(180deg);transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;+border-width:0 5px 5px;border-width:0 5px 5px \9/;}
@media \0screen{.xDroplist.expand .xDroplistArrow{border-width:0 5px 5px;}}
.xDroplist.expand .xDroplistList{height:auto;border:1px #ccc solid;}
.xDroplist.scroll .xDroplistList{overflow-y:auto;}
.xDroplist .xDroplistArrow{font-size:0;line-height:0;border:0 transparent solid;border-width:5px 5px 0;border-color:#4D4D4D transparent;width:0; overflow:hidden;height:0;cursor:pointer;position:absolute;z-index:9;right:5px;top:10px;}
.xDroplist .xDroplistText{height:24px;display:block;line-height:24px;margin-right:20px;text-indent:5px;cursor:default;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}
.xDroplist .xDroplistList{position:absolute;left:-1px;margin:0;background:#fff;height:0px;overflow:hidden;}
.xDroplist .xDroplistList .xDroplistItem{display:block;vertical-align:top;overflow:visible;background:#fff;}
.xDroplist .xDroplistList .xDroplistItem:hover{}
.xDroplist .xDroplistList .xDroplistItem a{display:block;line-height:24px;color:#369;padding:0 5px;text-decoration:none;overflow:visible;}
.xDroplist .xDroplistList .xDroplistItem a:hover{background-color:#e2e7ee;color:#369;}
.xDroplist .xDroplistList .xDroplistItem a:active{background-color:#D5D7DB;color:#369;}
.xDroplist .xDroplistList .xDroplistItem.selected a{background-color:#517baf;color:#fff;}
.xDroplist .xDroplistList .xDroplistItem .tw{white-space:nowrap;text-decoration:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}
.xDroplist .xDroplistList .xDroplistItem a .tw{cursor:pointer;}
.xDroplist.w80{width:80px;}

.xDroplist{vertical-align:middle;}

.xDroplist .xDroplistList{}
.xDroplist .xDroplistList .xDroplistItem axx{display:block;position:relative;overflow:visible;white-space:nowrap;word-break:keep-all;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--script type="text/javascript" src="jquery-1.9.1.min.js"></script-->
<script type="text/javascript" src="city.min.js"></script>
</head>
<body>
<div>
	<h2>xDroplist v3.0:</h2>
</div>

<div>
	id:date1<select id="date" name="date" onchange="changeDate(this)">
		<option value="本季本季本季本季">本季本季本季本季</option>
		<option value="本月">本月</option>
		<option value="本周">本周</option>
		<option value="">本周2</option>
	</select>
	
	id:date2<select id="date2" name="date2" onchange="changeDate(this)">
		<option value="本季">本季</option>
		<option value="本月">本月</option>
		<option value="本周">本周</option>
		<option value="">本周2</option>
	</select>
	
	<div class="debug">
		<h2>debug:</h2>
		<p>id:date1&nbsp;-&nbsp;<span id="date-result">&nbsp;</span></p>
		<p>id:date2&nbsp;-&nbsp;<span id="date2-result">&nbsp;</span></p>
		<p>all&nbsp;-&nbsp;<span id="xDroplist-item-index" style="color:red;">&nbsp;</span></p>
	</div>
</div>

<div style="margin-top:50px;" id="linkage">
	<select class="prov" onchange="cityStart()"></select>
	<select class="city" onchange="distStart()"></select>
	<select class="dist"></select>
</div>


<div style="margin-top:50px;">
	<select id="datetest" style="width:100px;">
		<option value="本季本季本季本季">本季本季本季本季本季本季</option>
		<option value="本月1本月2本月3本月4本月5本月6本月7本月8">本月1本月2本月3本月4本月5本月6本月7本月8</option>
		<option value="本周本周本周本周本周本周">本周本周本周本周本周本周</option>
		<option value="">本周2</option>
	</select>
</div>

<div style="margin-top:50px;margin-bottom:100px;" id="p4">
	<select>
		<option value="本季">本季</option>
		<option value="本月">本月</option>
		<option value="本周">本周</option>
		<option value="">本周2</option>
		<option value="本季">本季</option>
		<option value="本月">本月</option>
		<option value="本周">本周</option>
		<option value="">本周2</option>
	</select>
	<select>
		<option value="本季">本季</option>
		<option value="本月">本月</option>
		<option value="本周">本周</option>
		<option value="">本周2</option>
		<option value="本季">本季</option>
		<option value="本月">本月</option>
		<option value="本周">本周</option>
		<option value="">本周2</option>
	</select>
</div>





<script type="text/javascript">
function changeDate(obj){
	$('#'+ obj.id +'-result').html('text:'+ obj.value +', value:'+ obj.options[obj.selectedIndex].text);
	//$('#value').html(obj.value);
	//$('#text').html(obj.options[obj.selectedIndex].text);
};

var defaults = {prov:'湖北',city:'武汉',dist:'江岸区', conf:{linkage:true}};

function cityStart(){
	var obj = $('.prov').get(0);
	var pid = obj.selectedIndex;
	var DOM = '';
	if(pid<0||typeof($locadata.citylist[pid].c)=="undefined"){
		$('.dist').empty().xDroplist(defaults.conf);
		return false;
	};
	$.each($locadata.citylist[pid].c,function(i,city){
		DOM+="<option value='"+city.n+"'>"+city.n+"</option>";
	});
	$('.city').html(DOM).xDroplist(defaults.conf);
	distStart();
};

function distStart(){
	var obj = $('.city').get(0);
	var pid = $('.prov').get(0).selectedIndex;
	var cid = obj.selectedIndex;
	var DOM = '';
	if(pid<0||cid<0||typeof($locadata.citylist[pid].c[cid].a)=="undefined"){
		$('.dist').empty().xDroplist(defaults.conf);
		return false;
	};
	$.each($locadata.citylist[pid].c[cid].a,function(i,dist){
		DOM+="<option value='"+dist.s+"'>"+dist.s+"</option>";
	});
	$('.dist').html(DOM).xDroplist(defaults.conf);
};

function init(){
	
	var DOM = '';
	$.each($locadata.citylist,function(i,prov){
		DOM+="<option value='"+prov.p+"'>"+prov.p+"</option>";
	});
	$('.prov').html(DOM).val(defaults.prov).xDroplist(defaults.conf);
	
	setTimeout(function(){
		if(defaults.prov!=null){
			//$('.prov').val(defaults.prov);
			cityStart();
			setTimeout(function(){
				if(defaults.city!=null){
					$('.city').val(defaults.city);
					distStart();
					setTimeout(function(){
						if(defaults.dist!=null){
							$('.dist').val(defaults.dist);
						};
					},1);
				};
			},1);
		};
	},1);
};


</script>
<script type="text/javascript">
/*
	xDroplist
	version: 3.0
	anthor: Jack.Chan
	release: 2013-04-15 17:51
 */
(function($){
	$.xDroplistSetttings = {max:0, width:'auto', listWidth:'auto', linkage:false, editable:false, fn:function(){}, debug: false};
	$.xDroplistSetup = function(s){return $.extend($.xDroplistSetttings, s);};
	$.fn.xDroplist = function(opt){
		var settings = {};
		if(!$(this).size())return false;
		if($.fn.jquery < '1.6'){
			$.fn.prop = $.fn.attr;
			$.fn.removeProp = $.fn.removeAttr;
		};
		var DOM;
		$(this).each(function(index){
			var _this = this;
			var $opt = $.extend({}, $.xDroplistSetttings, opt);
			var $xDroplist = {$this: null, $select: null, $item: null, $text: null, $opt: $opt, width: 0, height: 0, size: 0, i: '', value: '', text: ''};
			var isxDroplist = $(this).parent().hasClass('xDroplist');
			if(!isxDroplist){
				$(this).wrap('<div class="xDroplist"></div>');
				DOM = '<s class="xDroplistArrow"></s><span class="xDroplistText"'+ ($opt.editable ? " contenteditable=\"true\"" : "") +' value=""></span><ul class="xDroplistList"></ul>';
				$(this).parent().prepend(DOM);
			};
			if($opt.linkage){$(this).prop('linkage', $opt.linkage);}
			$xDroplist = {$this: $(this).parent(), $select: $(this)};
			$xDroplist.height = $xDroplist.$this.height();
			$xDroplist.width = $opt.width.toString().replace(/\s/g, '');
			$xDroplist.listWidth = $opt.listWidth.toString().replace(/\s/g, '');
			
			var xDroplistBuilder = function(){
				$('.xDroplistList', $xDroplist.$this).removeAttr('style');
				DOM = '';
				$xDroplist.size = $('option', $xDroplist.$select.hide()).each(function(i){
					DOM+= '<li class="xDroplistItem'+ ((this.parentNode.selectedIndex == i) ? " selected" : "") +'" value="'+ this.value +'" title="'+ this.text +'"><a href="javascript:void(0)"><div class="tw">'+ this.text +'</div></a></li>';
				}).size();
				$('.xDroplistList', $xDroplist.$this).html(DOM);
				$xDroplist.$item = $('.xDroplistItem', $xDroplist.$this);
				$xDroplist.$text = $('.xDroplistText', $xDroplist.$this);
				if($xDroplist.size > $opt.max && $opt.max > 0){
					$xDroplist.$this.addClass('scroll').find('.xDroplistList').css({'max-height': ($xDroplist.height * $opt.max)});
				};
				if($xDroplist.size){
					$xDroplist.$text.text(_this.options[_this.selectedIndex].text);
					$xDroplist.$item.click(function(){
						$xDroplist.i = $(this).index();
						$xDroplist.value = $(this).attr('value') || '';
						$xDroplist.text = $(this).text() || '';
						$xDroplist.$item.removeClass('selected');
						$(this).addClass('selected');
						$xDroplist.$text.text($xDroplist.text).attr('value', $xDroplist.value);
						$xDroplist.$this.removeClass('expand');
						$('option', $xDroplist.$select).removeAttr('selected').eq($xDroplist.i).prop('selected','selected').parent().change();
						$opt.fn.apply($opt, [$xDroplist]);
						if($opt.debug){
							console.log('\n>>> xDroplist item click['+ (new Date())+']  <<<<<<\nxDroplist:{\n\t$this:'+ $xDroplist.$this +',\n\t$select:'+ $xDroplist.$select +',\n\t$item'+ $xDroplist.$item +',\n\t$text'+$xDroplist.$text +',\n\t$opt:'+ $opt +',\n\twidth:'+ $xDroplist.width +',\n\theight:'+ $xDroplist.height +',\n\tsize:'+ $xDroplist.size +',\n\ti:'+ $xDroplist.i +',\n\tvalue:'+ $xDroplist.value +',\n\ttext:'+ $xDroplist.text +'\n}');
						};
						return false;
					});
				}else{
					$xDroplist.$text.text('').attr('value', '');
				};
				$xDroplist.width = $opt.width;
				$xDroplist.listWidth = $opt.listWidth;
				if($opt.width == 'auto' || $opt.width == ''){$xDroplist.width = parseInt($xDroplist.$select.show().get(0).offsetWidth+7);};
				if($opt.listWidth == 'auto' || $opt.listWidth == ''){
					$xDroplist.listWidth = (($xDroplist.$item.width()+7) < $xDroplist.width) ? '100%' : ($xDroplist.$item.width()+7);
				};
				$xDroplist.$this.css({width: $xDroplist.width});
				$('.xDroplistList', $xDroplist.$this).width($xDroplist.listWidth);
				$xDroplist.$select.hide();
				$xDroplist.$this.unbind('mouseenter mouseleave').hover(function(event){
					$xDroplist.height = $(this).height();
					$xDroplist.size = $('option', $xDroplist.$select).size();
					var tmp = {x:parseInt($(this).offset().left - $(window).scrollLeft()), y:parseInt($(this).offset().top - $(window).scrollTop())};
					tmp.size = ($xDroplist.size > $opt.max && $opt.max > 0) ? $opt.max : $xDroplist.size;
					tmp.height = ($xDroplist.height * (tmp.size+1));
					tmp.width = $('.xDroplistList', $xDroplist.$this).get(0).offsetWidth;
					if((tmp.y + tmp.height) > $(window).height() && tmp.y > tmp.height){
						$('.xDroplistList', $xDroplist.$this).css({bottom: $xDroplist.height});
					};
					if((tmp.x + tmp.width) > $(window).width() && tmp.x > tmp.width){
						$('.xDroplistList', $xDroplist.$this).css({left:'auto',right: '-1px'});
					};
					if($xDroplist.size)$(this).addClass('expand');
					if($opt.debug){
						console.log('\n>>> xDroplist hover ['+ (new Date())+']  <<<<<<\noffsetLeft:'+ tmp.x +'\noffsetTop:'+ tmp.y +'\nsize:'+ tmp.size +'\nheight:'+ tmp.height +'\nwidth:'+ tmp.width +'\nwindowHeight:'+ $(window).height());
					};
				}, function(){
					$(this).removeClass('expand');
					$('.xDroplistList', $xDroplist.$this).css({bottom:'',left:'',right:''});
				});
				$xDroplist.$select.unbind('change').change(function(){
					if($opt.linkage)xDroplistBuilder();
				});
			};
			xDroplistBuilder();
		});
		return this;
	};
})(jQuery);


$.xDroplistSetup({max:10,fn:function(data){
	$('#xDroplist-item-index').html('xDroplist-item-index: <b>'+ data.i +'</b>');
}});


$('select').xDroplist();

$('#p4 select').xDroplist({max:4, listWidth:'200%',fn:function(data){
	document.title = 'itemWidth:'+ data.$item.width();
}});


init();
</script>
</body>
</html>